<template>
  <div class="demo">
    <div class="demo-title">内联登录栏</div>
    <div class="demo-content">
      <Form layout="inline" :model="formState" @finish="onFinish" @finish-failed="onFinishFailed">
        <Form.Item>
          <Input v-model:value="formState.user" placeholder="Username">
            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </Input>
        </Form.Item>
        <Form.Item>
          <Input v-model:value="formState.password" type="password" placeholder="Password">
            <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </Input>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            html-type="submit"
            :disabled="formState.user === '' || formState.password === ''"
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import type { UnwrapRef } from 'vue';
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Form from '@sscd/form';
  import type { FormProps } from '@sscd/form';
  interface FormState {
    user: string;
    password: string;
  }
  const formState: UnwrapRef<FormState> = reactive({
    user: '',
    password: '',
  });
  const onFinish: FormProps['onFinish'] = (values) => {
    console.log(values, formState);
  };
  const onFinishFailed: FormProps['onFinishFailed'] = (errors) => {
    console.log(errors);
  };
</script>
